import React from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash';

import { PageHeader } from '../components/page-header';
import { Content, PageTitle } from '../components/content';
import { PageFooter } from '../components/page-footer';
import { Book, IBookQueryAllCriteria } from './components/books.api';
import { BookQueryPanel } from './components/book-query-panel';
import { BookList } from './components/book-list';
import { Pagination } from '../components/pagination';

import * as Sys from '../sys';
import { ISubmitEvent } from '../sys.dom';
import * as SysApi from '../sys.api';

import * as BooksApi from './components/books.api';

BooksApi.register();

interface IAppStates {
    books: Book[];
    count: number;
    currentPageIndex: number;
}

export class App extends React.Component<{}, IAppStates> {
    private queryAllCriteria: IBookQueryAllCriteria;
    private pageArgs: SysApi.IPageArgs;

    constructor(props: {}) {
        super(props);

        this.state = {
            books: [],
            count: 0,
            currentPageIndex: 1,
        };

        this.queryAllCriteria = {
            categories: [BooksApi.BookCategory.Literature, BooksApi.BookCategory.Science, BooksApi.BookCategory.History],
            key: '',
            minPrice: null,
            maxPrice: null,
            minPubDate: null,
            maxPubDate: null,
        };
        this.pageArgs = {
            index: 1,
            pageSize: 20,
        };
    }

    private doQueryAll = (force: boolean = false): void => {
        const currentPageIndex: number = this.pageArgs.index;
        const page: string = SysApi.page(this.pageArgs);

        SysApi.call('books.queryAll', { ...this.queryAllCriteria, page }, force)
            .then(data => {
                this.setState({
                    books: data.books,
                    count: data.count,
                    currentPageIndex,
                });
            })
            .catch(reason => {
                console.error(reason);
            });
    }

    private handleBookQueryPanelSubmit = (evt: ISubmitEvent<IBookQueryAllCriteria>) => {
        _.assign(this.queryAllCriteria, evt.value);
        _.assign(this.pageArgs, { index: 1 });
        this.doQueryAll(true);
    };

    private handlePaginationSubmit = (evt: ISubmitEvent<number>) => {
        _.assign(this.pageArgs, { index: evt.value });
        this.doQueryAll(true);
    }

    componentDidMount = () => {
        this.doQueryAll();
    };

    render = (): JSX.Element => {
        return <>
            <PageHeader current={20} />
            <Content>
                <PageTitle>Books</PageTitle>
                <BookQueryPanel criteria={this.queryAllCriteria} onSubmit={this.handleBookQueryPanelSubmit} />
                <BookList books={this.state.books} />
                <Pagination count={this.state.count} pageSize={this.pageArgs.pageSize} current={this.state.currentPageIndex} onPageSubmit={this.handlePaginationSubmit} />
            </Content>
            <PageFooter />
        </>
    };
}

Sys.ready(() => ReactDOM.render(<App />, document.getElementById('root')!));